<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="区域">
          <el-input v-model="area" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="所属地点">
          <el-input v-model="place" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="使用人工号">
          <el-input v-model="jobNumId" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="使用人">
          <el-input v-model="uname" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="deptName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="领用类型">
          <el-input v-model="classification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="领用物品">
          <el-input v-model="items" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="领用数量">
          <el-input v-model="number" size="mini" readonly></el-input>
          <!--<el-button plain type="warning">库存：{{remain}}</el-button>-->
        </el-form-item>
        <el-form-item label="申请类型">
          <el-radio v-model="applytype" label="新增物品">新增物品</el-radio>
          <el-radio v-model="applytype" label="已坏更换">已坏更换</el-radio>
        </el-form-item>
        <el-form-item label="用途/更换原因">
          <el-input type="textarea" v-model="reason" size="mini"></el-input>
        </el-form-item>



        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <van-step v-show="oneShow">
              <p style="font-size:16px;font-weight: 900">指定审批人</p>
              <van-image v-for="(item,index) in ywusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px"><p style="font-size: 10px ;justify-content: center">{{item.name}}</p></van-image>
            </van-step>
            <van-step>
              <p style="font-size:16px;font-weight: 900">行政组</p>
              <van-image v-for="(item,index) in spusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px"><p style="font-size: 10px ;justify-content: center">{{item.name}}</p></van-image>
            </van-step>
            <van-step v-if="threeShow">
              <van-image v-for="(item,index) in thrusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px"><p style="font-size: 10px ;justify-content: center">{{item.name}}</p></van-image>
            </van-step>
          </van-steps>
        </div>

        <el-form-item>
          <el-button id="isAgree"  v-bind:disabled="true" type="primary" size="mini">{{message}}</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
export default {
  data() {
    return {
      id:"",
      area:"",
      place:"",
      uname:"",
      deptId:"",
      deptName:"",//部门名称
      jobNumId:"",
      items:"",//领用物品
      classification:"",
      reason:"",
      number:"",
      remain:"",//选择物品的剩余数量
      applytype:"",
      active:"-1",//步骤索引,从0开始

      nowUser: '',
      title: "物品领用详情",
      fileList: [{fileId:""}],
      fileName:"",
      fileUrl:"",

      spusers:[],//对应的行政组审批用户

      message:"审核中",
      isShow:false,

      show:false,//驳回原因展示
      bhreason:"无",//驳回原因
      agreeShow:false,
      tgreason:"无",
      showWp:false,//物品状态，新品、老品
      showOld:false,//老品需要设置编号
      wpnumber:"",//老品编号

      oneShow:false,//第一层审批是否显示
      ywusers:[],//指定审批人
      threeShow:false,//主要是针对武汉有主管二级审批
      thrusers:[],
    };
  },

  created() {
    this.id=this.$route.params.id;
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.selXZUser();//查找行政组所有人
    this.getDetail();
  },

  methods: {

    preview(){
      //document.getElementById("preview").style.display= "";
      //this.pdfshow=true;
      this.$router.push({path: "/sp/pdfPreview/" + this.attachment});
    },

    //选择审批人，即行政组所有人
    /*selXZUser(){
      this.$https.post('/mobiles/selUsherByDept',{
        deptName:"行政组"
      }).then((res)=>{
        this.spusers=res.data.data;
      }).catch(err => {
        console.log(err);
      })
    },*/
    selXZUser(){
      this.$https.post('/mobiles/selApplyUser',{
        nowUser:this.nowUser
      }).then((res)=>{
        debugger
        this.spusers=res.data.spusers;//相应地区的行政组人员
        this.ywusers=res.data.ywusers;//相应地区的一级审批人员（运维人员）
        if (res.data.thrusers){
          this.threeShow=true;
          this.thrusers=res.data.thrusers;
        }

      }).catch(err => {
        console.log(err);
      })
    },

    //找到“运维-深圳”的审批人
/*    selywUser(){
      this.$https.post('/mobiles/selUsherByDept',{
        deptName:"运维-深圳"
      }).then((res)=>{
        this.ywusers=res.data.data;
      }).catch(err => {
        console.log(err);
      })
    },*/

    //找到资产指定的管理者进行审批
    selArticlesManager(){
      this.$https.post('/mobiles/selArticlesManager',{
        area:this.area,
        place:this.place,
        goods:this.items,
      }).then((res)=>{
        debugger
        if (res.data.data.length>0){
          this.spusers=res.data.data;
        }

      }).catch(err => {
        console.log(err);
      })
    },

    //获取对应申请的详情
    getDetail(){
      //console.log(id)
      this.$https.post('/mobiles/selArticlesDetail', {
        id:this.id,
        nowUser:this.nowUser,
      }).then((res)=>{
        this.area=res.data.data.area;
        this.place=res.data.data.place;
        this.uname=res.data.data.uname;
        this.jobNumId=res.data.data.jobnum;
        this.deptName=res.data.data.deptName;
        this.items=res.data.data.goods;
        this.classification=res.data.data.classification;
        this.number=res.data.data.number;
        this.applytype=res.data.data.applytype;
        this.reason=res.data.data.reason;
        this.remain=res.data.data.remain;

        if (res.data.data.goods == "电脑" || res.data.data.goods == "显示器" || res.data.data.goods == "显示屏" || res.data.data.goods=="主机" || res.data.data.goods=="键盘" || res.data.data.goods=="鼠标" || res.data.data.goods=="固态硬盘" || res.data.data.goods=="内存条"){
          //this.selywUser();
          if (this.area.indexOf("武汉")!=-1){
            this.oneShow=false;
          }else {
            this.oneShow=true;
          }
          this.selArticlesManager();
        }else {
          this.oneShow=false;
          this.selArticlesManager();
        }
        if (res.data.data.agree == "已通过"){
          this.active="2";
          this.message="已通过"
        }else if (res.data.data.agree == "已驳回"){
          this.message="已驳回"
          if (res.data.data.ywShow && res.data.data.ywShow!=""){
            if (this.oneShow==true){
              this.active="0";
            }else {
              this.active="1";
            }
          }
        }else if (res.data.data.approver && res.data.data.approver!=""){//存在审批人，但审批还没通过
          if (this.oneShow==true){
            this.active="0";
          }else {
            this.active="1";
          }
        }

      }).catch(err => {
        console.log(err);
      })
    },


    // 返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>